<template>
    <div>
        <div>
            <el-button type="text" @click="addSourse">新增数据源</el-button>
            <el-button type="text" @click="editSourse" v-show="data.options.sourceId">修改数据源</el-button>
            <el-button type="text" @click="delSourse" v-show="data.options.sourceId">删除数据源</el-button>
            <el-form-item label="数据源">
                <el-select v-model="data.options.sourceId">
                    <el-option
                        v-for="item in sourceData"
                        :key="item.sourceId"
                        :label="item.name"
                        :value="item.sourceId">
                    </el-option>
                </el-select>
            </el-form-item>
        </div>
        <div v-if="data.options.liandong">
            <el-form-item label="数据关联" v-if="data.type!='TimeLineEchart'">
                <el-select v-model="data.options.liandong" @change="liandongChange" multiple  placeholder="默认无关联">
                    <el-option
                    v-for="(item,i) in formList"
                    :key="i"
                    :label="item.name+(i+1)"
                    :value="item.name+(i+1)">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联属性" v-if="data.options.liandong.length>0">
                <div v-for="(item,i) in data.options.liandong" :key="i">
                    {{item}}
                    <el-input v-model="data.options.liandongArr[i].value"></el-input>
                </div>
            </el-form-item>
        </div>
        <el-form-item label="图示标题" v-if="Object.keys(data.options.title).indexOf('text')>0">
            <el-input v-model="data.options.title.text"></el-input>
        </el-form-item>
        <el-form-item label="数据配色" v-if="data.type!='TimeLineEchart'">
            <el-select @change="changeColor" v-model="colorName" placeholder="默认配色">
                <el-option
                v-for="item in colors"
                :key="item.code"
                :label="item.name"
                :value="item.data">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="注解方向" v-if="Object.keys(data.options).indexOf('legend')>0">
            <el-radio-group v-model="data.options.legend.orient">
                <el-radio label="horizontal">横向</el-radio>
                <el-radio label="vertical">竖向</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="注解位置" v-if="Object.keys(data.options).indexOf('legend')>0">
            <span>距左距离</span>
            <el-input v-model="data.options.legend.left"></el-input>
            <span>距上距离</span>
            <el-input v-model="data.options.legend.top"></el-input>
        </el-form-item>
        <div v-if="Object.keys(data.options).indexOf('geo')>0">
            <el-form-item label="区块颜色">
                <el-color-picker v-model="data.options.geo.itemStyle.normal.areaColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="分线颜色">
                <el-color-picker v-model="data.options.geo.itemStyle.normal.borderColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="hover颜色">
                <el-color-picker v-model="data.options.geo.itemStyle.emphasis.areaColor"></el-color-picker>
            </el-form-item>
        </div>
    </div>
</template>
<script>
import { getEchartByType, getEchartColor, removeDataSource } from '@/api/api'
import { mapGetters, mapActions } from 'vuex'
const echartColors = ['#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18','#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18','#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18']
export default {
    name: 'SetCommonEchart',
    props: {
        data: {
            type: Object
        },
        type: {
            type: String
        },
        formList: {
            type: Array
        }
    },
    computed: {
		...mapGetters(['echartColors','editSuccess','addSourseVisible']),
    },
    watch: {
        editSuccess: {
            handler() {
                this._getEchartByType()
            },
            deep: true
        },
    },
    data(){
        return {
            parms: {
                type: this.type
            },
            sourceData: [],
            colors: [],
            colorName: ''
        }
    },
    
    created() {
        this._getEchartByType()
        this._getEchartColor()
    },
    methods: {
        ...mapActions([
            'echartColorsChange',
            'addSourseVisibleChange',
            'editSourseVisibleChange'
        ]),
        addSourse(){
            this.addSourseVisibleChange(true)
            this.editSourseVisibleChange(false)
        },
        editSourse(){
            this.editSourseVisibleChange(true)
            this.addSourseVisibleChange(false)
        },
        delSourse(){
            removeDataSource({dataSourseId: this.data.options.sourceId}).then(res=>{
                if(res.rcode=='0000') {
                    this.$message({
                        message: '数据源删除成功',
                        type: 'success'
                    });
                    this._getEchartByType()
                    this.data.options.sourceId = ''
                }
            })
        },
        _getEchartByType(){
            getEchartByType(this.parms).then(res=>{
                if(res.rcode=='0000'){
                    this.sourceData = res.data
                }
            })
        },
        _getEchartColor(){
            getEchartColor().then(res=>{
                if(res.rcode=='0000'){
                    this.colors = [{code: 'color1',name: '默认配色',data: echartColors},...res.data]
                }
            })
        },
        changeColor(val){
            this.echartColorsChange(val)
        },
        liandongChange(){
            this.data.options.liandongArr = []
            this.data.options.liandong.map(item=>{
                this.data.options.liandongArr.push({
                    name: item,
                    value: ''
                })
            })
        },
    }
}
</script>
<style lang="scss" scoped>
    .colors{
        display: block;
        li{
            display: inline-block;
            width: 30px;
            height: 20px;
            margin-left: 5px;
        }
    }
</style>
